<template>
  <el-dialog :visible="openUpload" @close="close" width="50%">
    <span
      slot="title"
      style="
        font-size: 24px;
        color: #2e4562;

        font-weight: bold;
      "
    >
      添加自定义上传
    </span>
    <!-- 表单 -->
    <el-form label-width="80px">
      <div style="display: flex; justify-content: flex-start">
        <el-form-item>
          <span
            slot="label"
            style="font-size: 21px; color: #2e4562; margin-right: 10px"
            >名称</span
          >
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item>
          <span
            slot="label"
            style="font-size: 21px; color: #2e4562; margin-right: 10px"
            >简介</span
          >
          <el-input v-model="form.explain" />
        </el-form-item>
      </div>
    </el-form>
    <!-- footer插槽 -->
    <template #footer>
      <el-button class="cancel" @click="$emit('close-upload')">
        取消
      </el-button>
      <el-button class="add" type="primary">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    openUpload: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: {
        name: "",
        explain: ""
      }
    }
  },
  methods: {
    close () {
      this.$emit('close-upload')
      this.form.name = ''
      this.form.explain = ''
    }
  },
}
</script>
<style lang="scss" scoped>
/deep/ .el-input__inner {
  background-color: #f0f4fa !important;
}
.cancel {
  width: 108px;
  height: 40px;
  text-align: center;
  font-size: 20px;
  color: #2f4663;
  background: #f0f4fa;
  border-radius: 25px;
  border: 0;
}
.add {
  width: 108px;
  height: 40px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  background: #ed8e1e;
  border-radius: 25px;
  border: 0;
}
</style>